<template>
  <div class="share">
    <div class="share-info">
        <div class="share-pic">
            <img class="share-img" :src="icon">
            <div class="share-comment">{{name}}</div>
        </div>
        <div class="share-comment" v-if="redirect_id === 0">{{shareName}}</div>
        <div class="share-comment" v-if="redirect_id">邀请您加入HiLady女王健身</div>
    </div>
    <div class="share-wechat">
        <div class="share-pic">
            <img class="share-image-wechat" :src="wechat">
        </div>
        <div class="share-comment">长按二维码关注</div>
        <div class="share-message">分享给朋友或朋友圈获取免费代金券</div>
    </div>
    <van-button class="share-btn" @click="furl" :loading="loading" type="primary"  size="large">{{btn_text}}</van-button>
  </div>
</template>
<script>
import Wx from 'weixin-js-sdk'

export default {
  name: 'share',
  comments: 'share',
  data () {
    return {
      icon: JSON.parse(localStorage.user).headimgurl,
      wechat: './static/wechat.jpg',
      shareName: 'HiLady健身女王',
      name: JSON.parse(localStorage.user).nickname,
      shareTip: '使用手机验证方式连接',
      loading: false,
      btn_text: '点击右上角立即分享',
      redirect_id: 0,
    }
  },
  created () {
    document.title = '微信分享'
    this.wxConfig()
    const redirectId = this.$route.query.redirect_id
    this.redirect_id = redirectId
    this.getRedirect(redirectId)
    // this.getMac()
  },
  methods: {
    getShareInfo: function () {
      this.$axios.post('/share/user').then(response => {
        console.log(response.data)
      })
    },
    wxConfig () {
      this.$axios.post('/wechat/share/config', {
        url: location.href.split('#')[0],
        redirect: location.href.split('?')[0],
        user_id: JSON.parse(localStorage.getItem('user')).id
      }).then(config => {
        const wxConfig = config.data
        // this.wechat = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=` + wxConfig.ticket || this.wechat
        Wx.config({
          debug: false,
          appId: wxConfig.appId,
          timestamp: wxConfig.timestamp,
          nonceStr: wxConfig.nonceStr,
          signature: wxConfig.signature,
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
        })
        Wx.ready(() => {
          // 分享到朋友圈
          Wx.onMenuShareTimeline({
            title: '分享邀请好友 | HiLady女王健身',
            link: wxConfig.shareURL,
            imgUrl: JSON.parse(localStorage.user).headimgurl,
            success: function () {
              // alert('分享成功！', this.course.preview.image);
            },
            cancel: function () {
              // alert('取消分享！');
            }
          })

          // 分享给朋友
          Wx.onMenuShareAppMessage({
            title: '分享邀请好友 | HiLady女王健身',
            desc: '分享邀请好友 一起获得代金券| HiLady女王健身',
            link: wxConfig.shareURL,
            imgUrl: JSON.parse(localStorage.user).headimgurl,
            type: 'link',
            dataUrl: '',
            success: function () {
              // alert('分享成功！');
            },
            cancel: function () {
              // alert('取消分享！');
            }
          })
        })
      })
    },
    getRedirect(redirect_id) {
      if(redirect_id && +redirect_id > 0) {
        this.$axios.get('/wechat/redirects/' + redirect_id).then(response => {
          const redirect = response.data;
          this.icon = redirect.user.headimgurl;
          this.name = redirect.user.nickname;
          this.wechat = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=` + redirect.ticket || this.wechat
        })
      }
    },
    furl: function () {
      this.$toast('点击右上角选择分享给朋友或到朋友圈获取代金券')
    }
  }
}
</script>
<style lang="postcss" scoped>
.share-info{
    margin-top: 20%;
}
.share-wechat{
    margin-top: 10%;
}
.share-img{
    width: 50px;
    height: 50px;
}
.share-image-wechat{
    width: 150px;
    height: 150px;
}
.share-success{
    font-size: 4rem;
    color: #06bf04;
}
.share-comment,.share-tip{
    font-size: 1rem;
    color: yellow;
    margin-top: 5px;
}
.share-btn{
    width: 60%;
    margin-top: 40px;
}
.share-message{
    font-size: 1rem;
    color: yellow;
    margin-top: 5px;
}
</style>
